<template>
  <div>
    <!-- 1.0 小卡片 -->
    <SCard :list="cardList"></SCard>

    <!-- 2.0 图表 -->
    <div class="charts">
      <div ref="main" style="width: 800px;height:400px;"></div>
    </div>
  </div>
</template>

<script>
import SCard from './components/SCard.vue'
import * as echarts from 'echarts'
import option from './options'
import { getIndexData } from '@/api/charts.js'

export default {
  components: {
    SCard
  },
  data() {
    return {
      cardList: [
        {
          id: 111,
          name: '总订单',
          count: '102, 400',
          icon: 'icon-renwu',
          color: '#1296db',
          alias: 'totalOrder'
        },
        {
          id: 112,
          name: '总销售额',
          count: '102, 400',
          icon: 'icon-Dollar',
          color: '#d4237a',
          alias: 'totalAmount'
        },
        {
          id: 113,
          name: '今日订单',
          count: '102, 400',
          icon: 'icon-task',
          color: '#1296db',
          alias: 'todayOrder'
        },
        {
          id: 114,
          name: '今日销售额',
          count: '102, 400',
          icon: 'icon-renminbi',
          color: '#1afa29',
          alias: 'totayAmount'
        }
      ],
      chartsData: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const data = await getIndexData()
      // console.log(data, 111)
      this.chartsData = data
      this.cardList.forEach(item => {
        // 当前的数据 = 请求回来的数据[当前这个名称]
        // item.count = data['totayAmount']
        item.count = this.chartsData[item.alias]
      })
      this.initCharts()
    },
    initCharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.main)

      // 指定图表的配置项和数据
      // 一个是x轴数据，一个是series里面的头两个
      option.xAxis.data = this.chartsData.xData
      option.series[0].data = this.chartsData.amountData
      option.series[1].data = this.chartsData.orderData

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.charts {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #fff;
}
</style>
